<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">库存首页</el-breadcrumb-item>
      <el-breadcrumb-item>字典表维护</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select v-model="value" placeholder="请选择类别名称" @change="getListByType(value)">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-button type="primary" @click="addTypeDialogVisible = true">新增类别</el-button>
          <el-button type="primary" @click="addDialogVisible = true">新增参数</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-key="getRowKey"
        border
        lazy
        :load="load"
        :tree-props="{hasChildren: 'hasChildren'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column
          label="类别名称"
          width="180">
          <template slot-scope="scope">{{scope.row.type.name}}</template>
        </el-table-column>
        <el-table-column
          label="CODE">
          <template slot-scope="scope">{{scope.row.type.code}}</template>
        </el-table-column>
        <el-table-column
          prop="value"
          label="VALUE"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="NAME"
          width="180">
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="添加二级"
              :enterable="false"
              placement="top"
            >
            <el-button
              type="primary"
              icon="el-icon-circle-plus"
              size="mini"
              @click="showAddCategoryDialog(scope.row.id)"
            ></el-button>
            </el-tooltip>
          <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.current_page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
    <!-- 添加类别的对话框 -->
    <el-dialog title="新增类别" :visible.sync="addTypeDialogVisible" width="50%" @close="addTypeDialogClosed">
      <!-- 内容主体 -->
      <el-form
        :model="addDictionaryTypeForm"
        ref="addDictionaryTypeFormRef"
        :rules="addDictionaryTypeFormRules"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addDictionaryTypeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="code" prop="code">
          <el-input v-model="addDictionaryTypeForm.code"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTypeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDictionaryType">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加二级的对话框 -->
    <el-dialog title="新增二级" :visible.sync="addCategoryDialogVisible" width="50%" @close="addCategoryDialogClosed">
      <!-- 内容主体 -->
      <el-form
        :model="addCategoryForm"
        ref="addCategoryFormRef"
        :rules="addCategoryFormRules"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addCategoryForm.name"></el-input>
        </el-form-item>
        <el-form-item label="条码规则" prop="barcode_rule">
          <el-input v-model="addCategoryForm.barcode_rule"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCategoryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
      </span>
    </el-dialog>
<!-- 添加参数的对话框 -->
    <el-dialog title="新增参数" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体 -->
      <el-form
        :model="addDictionaryForm"
        ref="addDictionaryFormRef"
        :rules="addDictionaryFormRules"
        label-width="100px"
      >
        <el-form-item label="类别" prop="type_id">
          <el-select v-model="addDictionaryForm.type_id" placeholder="请选择类别">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="addDictionaryForm.name"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model="addDictionaryForm.value" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDictionary">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
name: "dictionary",
  created() {
    this.getList()
    this.getType()
  },
  data() {
    return {
      queryInfo: {
        type_id: '',
        current_page: 1,
        pagesize: 10
      },
      tableData: [],
      total: 0,
      options: [],
      value: '',
      // 添加用户对话框
      addTypeDialogVisible: false,
      addDialogVisible: false,
      addCategoryDialogVisible: false,
      // 修改用户
      editDialogVisible: false,
      editUserForm: {},
      // 类别添加
      addDictionaryTypeForm: {
        name: '',
        code: ''
      },
      // 类别添加
      addCategoryForm: {
        name: '',
        barcode_rule: '',
        type_id: 0
      },
      // 参数添加表单验证规则
      addDictionaryTypeFormRules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入code', trigger: 'blur'}
        ]
      },
      // 参数添加
      addDictionaryForm: {
        name: '',
        value: 0,
        type_id: ''
      },
      // 参数添加表单验证规则
      addDictionaryFormRules: {
        type_id: [
          {required: true, message: '请选择类别', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        value: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 1, message: '值必须大于0', trigger: 'blur'}
        ]
      },
      addCategoryFormRules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        barcode_rule: [
          {required: true, message: '请输入条码规则', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    showAddCategoryDialog(id) {
      this.addCategoryForm.type_id = id;
      this.addCategoryDialogVisible = true;
    },
    // 监听 添加类型对话框的关闭事件
    addTypeDialogClosed () {
      this.$refs.addDictionaryTypeFormRef.resetFields()
    },
    addCategoryDialogClosed () {
      this.$refs.addCategoryFormRef.resetFields()
    },
    // 监听 添加参数对话框的关闭事件
    addDialogClosed () {
      this.$refs.addDictionaryFormRef.resetFields()
    },
    // 添加类型
    addDictionaryType () {
      // 提交请求前，表单预验证
      this.$refs.addDictionaryTypeFormRef.validate(async valid => {
        // 表单预校验失败
        if (!valid) return
        const { data: res } = await this.$http.post('dictionaryTypeAdd', this.addDictionaryTypeForm)
        if (res.meta.status !== 200) {
          this.$message.error('添加类型失败！')
        }
        this.$message.success('添加类型成功！')
        // 隐藏添加用户对话框
        this.addTypeDialogVisible = false
        await this.getType()
      })
    },
    // 添加参数
    addDictionary () {
      // 提交请求前，表单预验证
      this.$refs.addDictionaryFormRef.validate(async valid => {
        // 表单预校验失败
        if (!valid) return
        const { data: res } = await this.$http.post('dictionaryAdd', this.addDictionaryForm)
        if (res.meta.status !== 200) {
          this.$message.error('添加人员失败！')
        }
        this.$message.success('添加人员成功！')
        // 隐藏添加用户对话框
        this.addDialogVisible = false
        await this.getList()
      })
    },
    getListByType(id) {
      this.queryInfo.type_id = id;
      this.queryInfo.current_page = 1;
      this.getList()
    },
    async getType() {
      const {data: res} = await this.$http.get('dictionaryTypeList');
      if (res.meta.status !== 200) {
        return this.$message.error('获取人员列表失败！')
      }
      this.options = res.data;
    },
    async getList() {
      const { data: res } = await this.$http.get('dictionaryList', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取字典表列表失败！')
      }
      this.tableData = res.data.data
      this.total = res.data.total
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getList()
    },
    handleCurrentChange (newSize) {
      this.queryInfo.current_page = newSize
      this.getList()
    },
    async removeById (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该人员, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      const { data: res } = await this.$http.delete('dictionaryDelete/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('删除失败！')
      }
      this.$message.success('删除成功！')
      await this.getList()
    },
    addCategory() {
      this.$refs.addCategoryFormRef.validate(async valid => {
        // 表单预校验失败
        if (!valid) return
        const { data: res } = await this.$http.post('categoryAdd', this.addCategoryForm)
        if (res.meta.status !== 200) {
          this.$message.error('添加二级失败！')
        }
        this.$message.success('添加二级成功！')
        // 隐藏添加用户对话框
        this.addCategoryDialogVisible = false
      })
    },
    async load(tree, treeNode, resolve) {
      const { data: res } = await this.$http.get('categoryList/' + tree.id)
      resolve(res.data)
    },
    getRowKey(row) {
      // console.log(row)
      return row.id;
    }
  }
}
</script>

<style scoped>

</style>
